@function contain($list, $value) {
  @return not not index($list, $value);
}

/**
 * @param $color
 * @param $direction: [top, bottom, left, right, vertical, radius, all] default: all
 * @param $radius default 1
 */
@mixin _border($color, $direction: all, $radius: 1px) {
  $list: top bottom left right;
  $vaue: 1px solid $color;
  @if $color==0 {
    $vaue: 0;
  }
  @if contain($list, $direction) {
    border-#{$direction}: $vaue;
  }
  @else if $direction==vertical {
    border-top: $vaue;
    border-bottom: $vaue;
  }
  @else {
    border: $vaue;
    @if $direction==radius {
      border-radius: $radius;
    }
  }
}


/*
移动端1像素方案，通过background-image渐变色实现
.border-l {
  @include onepx(#eee, left);
}
*/

/**
 * @param $color
 * @param $direction: top bottom left right vertical all,  default: all
 * @param $pseudo: after before, default: after
 */
@mixin onepx($color, $direction: all, $pseudo: after) {
  $border-t: -webkit-gradient(linear, left bottom, left top, color-stop(.5, rgba(0, 0, 0, 0)), color-stop(.5, $color));
  $border-b: -webkit-gradient(linear, left top, left bottom, color-stop(.5, rgba(0, 0, 0, 0)), color-stop(.5, $color));
  $border-l: -webkit-gradient(linear, right top, left top, color-stop(.5, rgba(0, 0, 0, 0)), color-stop(.5, $color));
  $border-r: -webkit-gradient(linear, left top, right top, color-stop(.5, rgba(0, 0, 0, 0)), color-stop(.5, $color));

  @include _border($color, $direction);

  @if $direction==vertical {
    background-image: none;
  }
  @media screen and (-webkit-min-device-pixel-ratio: 2) {
    @include _border(0, $direction);
    @if $direction==top or $direction==bottom or $direction==vertical {
      background-repeat: repeat-x;
      -webkit-background-size: 100% 1px;
      background-size: 100% 1px;

      @if $direction==top {
        background-position: left top;
        background-image: $border-t;
      }
      @else if $direction==bottom {
        background-position: left bottom;
        background-image: $border-b;
      }
      @else {
        background-position: top, bottom;
        background-image: $border-t, $border-b;
      }
    }
    @else if $direction==left or $direction==right {
      background-repeat: repeat-y;
      -webkit-background-size: 1px 100%;
      background-size: 1px 100%;
      @if $direction==left {
        background-position: left top;
        background-image: $border-l;
      }
      @else {
        background-position: right top;
        background-image: $border-r;
      }
    }
    @else {
      position: relative;
      &:#{$pseudo} {
        content: " ";
        width: 100%;
        height: 100%;
        position: absolute;
        top: 0;
        left: 0;
        background-image: $border-t, $border-r, $border-b, $border-l;
        -webkit-background-size: 100% 1px, 1px 100%, 100% 1px, 1px 100%;
        background-size: 100% 1px, 1px 100%, 100% 1px, 1px 100%;
        background-repeat: no-repeat;
        background-position: top, right, bottom, left;
        padding: 1px;
        box-sizing: border-box;
        z-index: 10;
        pointer-events: none;
      }
    }
  }
}

/*
通过transform实现，支持圆角
.border-r {
  @include onepx-scale(#eee, radius, after, 2px);
}
*/

/**
 * @param $color
 * @param $direction: top bottom left right vertical all radius,  default: all
 * @param $pseudo: after before, default: after
 * @param $radius default: 1px
 */
@mixin onepx-scale($color, $direction: all, $pseudo: after, $radius: 1px) {
  $list: top bottom left right;
  @include _border($color, $direction, $radius);
  @media only screen and (-webkit-min-device-pixel-ratio: 2) {
    position: relative;
    @include _border(0, $direction);
    @if $direction==all or $direction==radius {
      // overflow: hidden;
    }
    &:#{$pseudo} {
      content: " ";
      position: absolute;
      display: block;
      // z-index: 5;
      pointer-events: none;

      @if contain($list, $direction) {
        background-color: $color;
      }

      @if $direction==top or $direction==bottom {
        left: 0;
        right: 0;
        height: 1px;
        width: 100%;
        -webkit-transform: scaleY(.5);
        transform: scaleY(.5);
        @if $direction==top {
          top: 0;
        }
        @else {
          bottom: 0;
        }

      }
      @else if $direction==left or $direction==right {
        top: 0;
        bottom: 0;
        width: 1px;
        height: 100%;
        -webkit-transform: scaleX(.5);
        transform: scaleX(.5);

        @if $direction==left {
          left: 0;
        }
        @else {
          right: 0;
        }
      }
      @else {
        top: 0;
        left: 0;
        width: 200%;
        height: 200%;
        @include _border($color, $direction, $radius);
        -webkit-transform: scale(.5);
        transform: scale(.5);
        box-sizing: border-box;
      }

      @if $direction==bottom or $direction==right {
        -webkit-transform-origin: 100% 100%;
        transform-origin: 100% 100%;
      }
      @else {
        -webkit-transform-origin: 0 0;
        transform-origin: 0 0;
      }
    }
  }
}
